<template>
	<div class="v-checkbox" @click="toggle" v-if="brandItem">
		<div class="check-hook" :class="{ 'check-choose': toggleChoose, 'un-check': !toggleChoose }">
		</div>
		<div class="check-text">
			{{brandItem.name}}
		</div>
	</div>
</template>
<script>
export default {
  name: 'VCheckbox',
  props: {
    brandItem: {
      type: Object,
      default: ''
    },
    isClickTab: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      toggleChoose: false
    }
  },
  watch: {
    isClickTab (val) {
      if (val.id === this.brandItem.id) {
        this.toggle()
      }
    },
    brandItem () {
      this.toggleChoose = false
    }
  },
  methods: {
    toggle () {
      this.toggleChoose = !this.toggleChoose
      this.$emit('on-choose-checkbox', this.toggleChoose, this.brandItem)
    }
  }
}
</script>
<style scoped>
.v-checkbox {
	height: 20px;
	overflow: hidden;
	cursor: pointer;
}

.v-checkbox:hover .un-check {
	border: 1px solid #ff600a;
}

.v-checkbox:hover .check-text {
	color: #ff600a;
}

.check-hook {
	float: left;
	width: 14px;
	height: 14px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	margin-top: 2px;
}

.check-choose {
	width: 16px;
	height: 16px;
	border: 0;
	background: url(../../assets/images/search/icon_check.png) no-repeat;
}

.check-text {
	float: left;
	height: 20px;
	line-height: 20px;
	margin-left: 8px;
}
</style>
